<template>
  <BmlMarkerClusterer :averageCenter="true">
    <bm-marker
      v-for="(markerInfo,index) in markerPoints"
      :key="index"
      :position="markerInfo.point"
      :icon="markerInfo.markerIcon"
      :dragging="idDragging"
      :massClear="markerInfo.massClear"
      @click="infoWindowOpen(index)"
    >
      <bm-info-window
        :show="markerInfo.infoWindowShow"
        :width="markerInfo.infoWindowWidth"
        :height="markerInfo.infoWindowHeight"
        :offset="markerInfo.offset"
        @close="infoWindowClose(index)"
        @open="infoWindowOpen(index)"
      >
        <slot>
          <div v-if="markerInfo.infoWindowType=='enterprise'" class="enterprise">
            <div class="enterprise_head" style="margin-bottom: 8px;">
              <div class="enterprise_img" style="margin: 10px 5px 0 0;">
                <img width="80px" height="100px" :src="markerInfo.infoWindowInfo.enterpriseInfo.enterpriseImgUrl"/>
              </div>
              <div>
                <div class="title">{{markerInfo.infoWindowInfo.enterpriseInfo.enterpriseName}}</div>
                <div style="line-height: 22px;">区域：{{markerInfo.infoWindowInfo.enterpriseInfo.enterpriseAddress}}</div>
                <div style="line-height: 22px;"><i class="el-icon-phone" style="margin: 0 3px;color:#9c9c9c"></i>  <span style="color:#9b9b9b">{{markerInfo.infoWindowInfo.enterpriseInfo.enterpriseTel}}</span></div>
                <div style="line-height: 22px;"><i class="el-icon-location" style="margin: 0 3px;color:#9c9c9c"></i>  <span style="color:#9b9b9b">{{markerInfo.infoWindowInfo.enterpriseInfo.enterpriseAd}}</span></div>
                <div style="max-width: 600px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                  <span>附属源库：</span>
                  <span v-if="markerInfo.infoWindowInfo.enterpriseInfo.enterpriseOriginList.length === 0">无</span>
                  <span style="color:#e6a23c" v-for="(v, i) of markerInfo.infoWindowInfo.enterpriseInfo.enterpriseOriginList" :key="i">{{v}}<el-divider direction="vertical" v-if="i !== markerInfo.infoWindowInfo.enterpriseInfo.enterpriseOriginList.length - 1"></el-divider></span>
                </div>
              </div>
            </div>
            <div class="infoFooter"  @click="goToArchives(index)"><i class="el-icon-document" style="font-size: 10px"></i>档案信息</div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
          <div v-else-if="markerInfo.infoWindowType=='enterpriseOrigin'" class="enterpriseOrigin" >
            <div class="title">{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originName}}</div>
            <div style="line-height:24px">区域：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.enterpriseOriginAddress}}</div>
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
              <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">用途：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originUse}}</div>
              <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">类别：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originType}}</div>
              <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">目视码：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originCode}}</div>
              <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">剂量：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originNumber}}</div>
              <div style="width: 80%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">时间：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originTimer}}</div>
              <div style="width: 80%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">源国家编码：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.originToolCode}}</div>
            </div>
            <!-- <div style="line-height:24px"><i class="el-icon-phone" style="margin: 0 5px;color:#9c9c9c"></i>  <span style="color:#9b9b9b">{{markerInfo.infoWindowInfo.enterpriseOriginInfo.enterpriseOriginTel}}</span></div> -->
            <div style="margin-bottom: 8px;line-height:24px">地址<i class="el-icon-location" style="margin: 0 5px;color:#9c9c9c"></i>：  <span style="">{{markerInfo.infoWindowInfo.enterpriseOriginInfo.enterpriseOriginCity}}</span></div>
            <div class="infoFooter" @click="handleChangeMyVideoShow"><i class="el-icon-map-location" style="font-size: 10px"></i>视频监控</div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
          <div v-else-if="markerInfo.infoWindowType=='origin'" class="origin">
            <div>
              <div class="title">{{markerInfo.infoWindowInfo.originInfo.originName}}</div>
              <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
                <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">用途：{{markerInfo.infoWindowInfo.originInfo.originUse}}</div>
                <div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">类别：{{markerInfo.infoWindowInfo.originInfo.originType}}</div>

				<div style="width: 50%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">剂量：{{markerInfo.infoWindowInfo.originInfo.originNumber}}</div>
				<div style="width: 80%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">时间：{{markerInfo.infoWindowInfo.originInfo.originTimer}}</div>
                <!--<div style="width: 50%;line-height: 22px;">目视码：{{markerInfo.infoWindowInfo.originInfo.originCode}}</div> originToolCode-->
                <div style="margin-bottom: 10px;width: 80%;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">源国家编码：{{markerInfo.infoWindowInfo.originInfo.originCode}}</div>
              </div>
            </div>
            <div>
              <div class="infoFooter" @click="handleChangeMyVideoShow"><i class="el-icon-map-location" style="font-size: 10px"></i>视频监控</div>
              <div class="infoFooter" @click="goToSourceSpace(index)"><i class="el-icon-document" style="font-size: 10px"></i>源空间</div>
            </div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
          <div v-else-if="markerInfo.infoWindowType=='site'" class="origin">
            <div>
              <div class="title">{{markerInfo.infoWindowInfo.enterpriseOriginInfo.siteName}}</div>
              <div>
                <div style="line-height:22px;color:#9c9c9c;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">地址：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.siteAddress}}</div>
                <div style="margin-bottom: 10px;line-height:22px;color:#9c9c9c;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">源数量：{{markerInfo.infoWindowInfo.enterpriseOriginInfo.sourceNum}}</div>
              </div>
            </div>
            <div>
              <div class="infoFooter" style="" @click="handleChangeMyVideoShow"><i class="el-icon-map-location" style="font-size: 10px"></i>视频监控</div>
            </div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
          <div v-else-if="markerInfo.infoWindowType=='person'" class="person">
            <div class="person_img" style="margin-top:3px;">
              <img width="80px" :src="markerInfo.infoWindowInfo.personInfo.personImgUrl"/>
            </div>
            <div>
              <div class="title">{{markerInfo.infoWindowInfo.personInfo.personName}}</div>
              <div style="line-height: 24px;">
                <span>类型:</span>
                <span>{{markerInfo.infoWindowInfo.personInfo.personType}}</span>
              </div>
              <div style="line-height: 24px;"><i class="el-icon-phone" style="margin: 0 5px;color:#9c9c9c"></i>  <span style="color:#9b9b9b">{{markerInfo.infoWindowInfo.personInfo.personTel}}</span></div>
            </div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
          <div v-else-if="markerInfo.infoWindowType=='car'" class="car">
            <div class="title">车牌：{{markerInfo.infoWindowInfo.carInfo.carCode}}</div>
            <div style="color:#9c9c9c;line-height: 20px;">是否有源:{{markerInfo.infoWindowInfo.carInfo.carHasOrigin}}</div>
            <div style="margin-bottom: 10px;color:#9c9c9c;line-height: 20px;">
              <span>源编码：{{markerInfo.infoWindowInfo.carInfo.carOriginCode}}</span>
              <span></span>
              <span style="margin-left: 10px;">核素名：{{markerInfo.infoWindowInfo.carInfo.carNuclideCode}}</span>
              <span></span>
              <span style="margin-left: 10px;">剂量：{{markerInfo.infoWindowInfo.carInfo.carOriginNum}}</span>
              <span></span>
            </div>
            <div class="infoFooter" @click="handleChangeMyVideoShow"><i class="el-icon-map-location" style="font-size: 10px"></i>视频监控</div>
            <div id="my_triangle_border_down" style="">
                <div></div>
                <div></div>
            </div>
          </div>
        </slot>
      </bm-info-window>
    </bm-marker>
  </BmlMarkerClusterer>
</template>

<script>
import BmMarker from "vue-baidu-map/components/overlays/Marker"; // marker标记组件
import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow"; // 浮框组件
import { BmlMarkerClusterer } from "vue-baidu-map";

/**
 * @author luyun
 * @summary 自定义标签及浮框组件，可自定义marker的图标和自定义的浮框显示
 */
export default {
  components: {
    BmMarker,
    BmInfoWindow,
    BmlMarkerClusterer
  },
  props: {
    idDragging: {
      type: Boolean,
      default: false
    },
    markerIcon: {
      // marker标记的图标
      type: Object,
      default: function(){
        return {url: require('../../../assets/info_images/car.png'), size: {width: 32, height: 32}}
      }
    },
    infoWindowWidth: {
      // 浮框宽度，220 - 730,默认为0，若为0，则根据内容自适应
      type: Number,
      default: 0
    },
    infoWindowHeight: {
      // 浮框高度，60 - 650,默认为0，若为0，则根据内容自适应
      type: Number,
      default: 0
    },
    offset: {
      type: Object,
      default: function() {
        return {width: 70, height: 0}
      }
    },
    markerPoints: {
      // 标记的坐标，用于定位
      type: Array,
      default: function() {
        return [

        ];
      }
    },
  },
  computed: {
  },
  watch: {
  },
  data() {
    return {
    };
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    infoWindowClose(index) {
      this.markerPoints[index].infoWindowShow = false
    },
    infoWindowOpen(index) {
      this.markerPoints[index].infoWindowShow = true
    },
    handleChangeMyVideoShow() {
      this.$emit("handleChangeMyVideoShow")
    },
    goToSourceSpace(index) {
      // console.log(this.markerPoints[index])
      this.$router.push({
          path: '/RCIM-SourceSpace',
          query: {
            EnterpriseSiteRadID: this.markerPoints[index].infoWindowInfo.originInfo.originId,
            EnterpriseInfoID: this.markerPoints[index].infoWindowInfo.originInfo.enterpriseId,
            radId: this.markerPoints[index].infoWindowInfo.originInfo.useRadDeviceID,
            lng: this.markerPoints[index].point.lng,
            lat: this.markerPoints[index].point.lat
          }
        })
    },
    goToArchives(index) {
      // console.log(this.markerPoints[index])
      this.$router.push({
        path: '/archives',
        query: {
          enterpriseId: this.markerPoints[index].infoWindowInfo.enterpriseInfo.enterpriseId,
          xkz: 1
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.enterprise {
  position: relative;
  .enterprise_head {
    display: flex;
    font-size: 12px;
    line-height: 16px;
    /*color: #ccc;*/
    color: #4d4d4d;


    div.enterprise_img {
      width: 80px;
    }

    .title {
      font-size: 14px;
      color: #000;
      line-height: 30px;
    }
  }
}

.enterpriseOrigin {
  font-size: 12px;
  line-height: 16px;
  /*color: #ccc;*/
  color: #4d4d4d;
  .title {
    font-size: 14px;
    color: #000;
    line-height: 30px;
  }
}

.origin {
  font-size: 12px;
  line-height: 16px;
  /*color: #ccc;*/
  color: #4d4d4d;

  .title {
    font-size: 14px;
    color: #000;
    line-height: 30px;
  }
}

.person {
  display: flex;
  font-size: 12px;
  /*color: #ccc;*/
  color: #4d4d4d;
  line-height: 18px;

  div.person_img {
    width: 80px;
  }
  .title {
    font-size: 14px;
    line-height: 20px;
    color: #000;
    margin-bottom: 3px;
    line-height: 30px;
  }
}

.car {
  font-size: 12px;
  /*color: #ccc;*/
  color: #4d4d4d;
  line-height: 16px;

  .title {
    font-size: 14px;
    line-height: 20px;
    color: #000;
    line-height: 30px;
  }
}

.infoFooter {
  display: inline;
  font-size: 12px;
  padding: 2px 5px;
  border: 1px solid #3591ff;
  color: #3591ff;
  border-radius: 10px;
  cursor: pointer;
}

/*向下*/
#my_triangle_border_down{
	display: none;
    width:0;
    height:0;
    border-width:10px 10px 0;
    border-style:solid;
    border-color:#ababab transparent transparent;/*灰 透明 透明 */
    position: absolute;
    bottom: -23px;
    left: 5%;

    div:nth-child(1){
      display:block;
      width:0;
      height:0;
      border-width:8px 8px 0;
      border-style:solid;
      border-color:#fff transparent transparent;/*黄 透明 透明 */
      position:absolute;
      top:-9px;
      left:-8px;
    }
    div:nth-child(2){
      width: 20px;
      height: 3px;
      background: #fff;
      position: absolute;
      left: -10px;
      bottom: 8px;
    }
}
</style>

<style lang="scss">
  #MyMap{
    .BMap_shadow{
      display: none !important;
    }

    .BMap_pop{
      div:nth-child(8) {
        display: none;
      }
      div:nth-child(9) {
        overflow: visible !important;
      }
    }
    // .bm-view{
    //   div:nth-child(1){
    //     div:nth-child(1){
    //       div:nth-child(2){
    //         div:nth-child(2){
    //           div{
    //             background-image:url("http://api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m0.png")!important;
    //             background-size: cover;
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
</style>
